<template>
  <view class="rules-page">
    <!-- 内容区域 -->
    <view class="content">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <view class="loading-text">加载中...</view>
      </view>

      <!-- 规则内容 -->
      <view v-else-if="ruleContent" class="rule-content">
        <MarkdownRenderer 
          :content="ruleContent" 
          :imageBaseUrl="imageBaseUrl"
        />
      </view>

      <!-- 空内容提示 -->
      <view v-else class="empty-content">
        <view class="empty-icon">📋</view>
        <view class="empty-text">暂无规则内容</view>
      </view>
    </view>
  </view>
</template>

<script>
import MarkdownRenderer from '@/components/MarkdownRenderer.vue'
import { getParams } from '@/utils/api'

export default {
  name: 'RegionRules',
  components: {
    MarkdownRenderer
  },
  data() {
    return {
      loading: true,
      ruleContent: '',
      imageBaseUrl: ''
    }
  },
  onLoad() {
    this.loadRuleContent()
  },
  methods: {
    // 加载规则内容
    async loadRuleContent() {
      try {
        this.loading = true
        
        // 获取配置中的代理规则内容
        const response = await getParams({
          fields: ['region_rule']
        })

        if (response && response.code === 1) {
          this.ruleContent = response.data.region_rule || ''
          // 设置图片基础URL
          this.imageBaseUrl = 'http://liandong.xxzcloud.com'
        } else {
          console.error('获取规则内容失败:', response)
          uni.showToast({
            title: '获取规则内容失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载规则内容出错:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.rules-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 32rpx;
  min-height: 100vh;
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400rpx;

  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}

.rule-content {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  background-color: #fff;
  border-radius: 16rpx;

  .empty-icon {
    font-size: 80rpx;
    margin-bottom: 24rpx;
    opacity: 0.6;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>
